// App.tsx
import React, { useState } from 'react';
import './Look.css';
import ColorPicker from '../color/ColorPicker';
// 类型定义
type Format = 'JPG' | 'PSD' | 'AI' | 'PNG' | 'EPS' | 'SVG' | '所有格式';
type Color = {
  id: string;
  name: string;
  hex: string;
};

// 界面组件
const Look = () => {
  // 分类状态
  const [primaryCategory, setPrimaryCategory] = useState<string>('全部');
  const [secondaryCategory, setSecondaryCategory] = useState<string>('广告设计');
  
  // 格式状态
  const [selectedFormats, setSelectedFormats] = useState<Record<Format, boolean>>({
    'JPG': false,
    'PSD': false,
    'AI': false,
    'PNG': false,
    'EPS': false,
    'SVG': false,
    '所有格式': false
  });
  
  // 颜色状态
  const [selectedColor, setSelectedColor] = useState<string | null>(null);
  
  // 一级分类
  const primaryCategories = ['全部', '设计模板', '视频|实拍', '插图', '摄影', '字体'];
  
  // 二级分类
  const secondaryCategories = {
    全部: ['广告设计', '元素', '装饰', '商务'],
    '设计模板': ['海报', '名片', '宣传单', '社交媒体'],
    '视频|实拍': ['背景视频', '产品实拍', '人物视频', '动画'],
    插图: ['扁平插画', '手绘', '3D图标', '线稿'],
    摄影: ['自然', '人物', '美食', '建筑'],
    字体: ['创意字体', '标准字体', '手写字体', '装饰字体']
  };
  
  // 格式选项
  const formats: Format[] = ['JPG', 'PSD', 'AI', 'PNG', 'EPS', 'SVG', '所有格式'];
  
  // 颜色选项
  const colors: Color[] = [
    { id: 'red', name: '红色', hex: '#FF4D4F' },
    { id: 'blue', name: '蓝色', hex: '#1890FF' },
    { id: 'green', name: '绿色', hex: '#52C41A' },
    { id: 'yellow', name: '黄色', hex: '#FAAD14' },
    { id: 'purple', name: '紫色', hex: '#722ED1' },
    { id: 'pink', name: '粉色', hex: '#EB2F96' },
    { id: 'cyan', name: '青色', hex: '#13C2C2' },
    { id: 'black', name: '黑色', hex: '#000000' },
    { id: 'white', name: '白色', hex: '#FFFFFF' },
    { id: 'gray', name: '灰色', hex: '#BFBFBF' }
  ];
  
  // 处理一级分类切换
  const handlePrimaryCategoryChange = (category: string) => {
    setPrimaryCategory(category);
    // 切换到默认的二级分类
    if (secondaryCategories[category as keyof typeof secondaryCategories]?.length > 0) {
      setSecondaryCategory(secondaryCategories[category as keyof typeof secondaryCategories][0]);
    }
  };
  
  // 处理格式选择
  const toggleFormat = (format: Format) => {
    setSelectedFormats(prev => ({
      ...prev,
      [format]: !prev[format]
    }));
  };
  
  // 渲染颜色选择器
  const renderColorSelector = () => {
    return (
      <div className="color-filter">
        <div className="filter-label">颜色：</div>
        <div className="color-grid">
          {colors.map(color => (
            <div 
              key={color.id}
              className={`color-circle ${selectedColor === color.id ? 'selected' : ''}`}
              style={{ backgroundColor: color.hex }}
              onClick={() => setSelectedColor(selectedColor === color.id ? null : color.id)}
              title={color.name}
            />
          ))}{'....'}<span ><ColorPicker/> </span>
        </div>
      </div>
    );
  };
  
  return (
    <div className="resource-selector">
      {/* 一级分类 */}
      <div className="primary-categories">
        {primaryCategories.map(category => (
          <button
            key={category}
            className={`category-btn ${primaryCategory === category ? 'active' : ''}`}
            onClick={() => handlePrimaryCategoryChange(category)}
          >
            {category}
          </button>
        ))}
      </div>
      
      {/* 二级分类 */}
      <div className="secondary-categories">
        {(secondaryCategories[primaryCategory as keyof typeof secondaryCategories] || []).map(category => (
          <button
            key={category}
            className={`category-btn ${secondaryCategory === category ? 'active' : ''}`}
            onClick={() => setSecondaryCategory(category)}
          >
            {category}
          </button>
        ))}
      </div>
      
      {/* 格式筛选 */}
      <div className="filter-section">
        <div className="filter-label">格式：</div>
        <div className="formats">
          {formats.map(format => (
            <div 
              key={format}
              className={`format-item ${selectedFormats[format] ? 'selected' : ''}`}
              onClick={() => toggleFormat(format)}
            >
              {format}
            </div>
          ))}
        </div>
      </div>
      
      {/* 颜色筛选 */}
      {renderColorSelector()}
      
      {/* 其他UI元素 */}
      <div className="results-count">
        找到 <strong>268</strong> 个资源
      </div>
      
      <div className="actions">
        <button className="action-btn">重置筛选</button>
        <button className="action-btn primary">应用筛选</button>
      </div>
    </div>
  );
}

export default Look;